<template>
  <div>
    <HomeHeader></HomeHeader>
    <TypeNav></TypeNav>
    <el-form>
      <div class="box">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">盛世绿能招投标系统</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/noticeList' }">招标公告</el-breadcrumb-item>
          <el-breadcrumb-item v-if="infos">{{ infos.noticeTitle }}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="grid-content">
          <h1 style="text-align: center;padding-top: 20px;">系统通知公告</h1>
          <el-row>
            <el-col :span="24">
              <div class="notice-left-box">
                <p style="border-left: solid 5px;border-color: #0065b5 !important;padding-left: 7px;">基本信息</p>
                <p>标题 : <span class="span" v-if="infos">{{ infos.noticeTitle }}</span></p>
                <p>类型 : <span class="span" v-if="infos && infos.noticeType != null && infos.noticeType === '1'">通知</span><span class="span" v-if="infos && infos.noticeType != null && infos.noticeType === '2'">公告</span></p>
                <p>创建人 : <span class="span" v-if="infos">{{ infos.createBy }}</span></p>
                <p>发布时间 : <span class="span" v-if="infos">{{ infos.createTime }}</span></p>
                <p style="border-left: solid 5px;border-color: #0065b5 !important;padding-left: 7px;margin-top: 20px;margin-bottom: 0px;">内容详情</p>
                <editor v-model="infos.noticeContent" v-if="infos" :min-height="192" style="font-size: 15px;"/>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <HomeFloor></HomeFloor>
    </el-form>

  </div>
</template>
<script>
import HomeFloor from "@/components/home/HomeFloor.vue";
import HomeHeader from "@/components/home/HomeHeader";
import TypeNav from "@/components/home/TypeNav";
import Editor from "@/components/Editor/index.vue";
import {getSystemNoticeDetail} from "@/api/home";

export default {
  name: 'ContactUs',
  components:{
    HomeHeader,
    TypeNav,
    HomeFloor,
    Editor
  },
  data() {
    return {
      infos: null,
      queryParams: {
        noticeId: null,
        noticeTitle: null
      },
    }
  },
  created() {
    this.queryParams.noticeId = this.$route.query.noticeId;//拿到参数----公告ID
    this.Info(this.queryParams.noticeId);
  },
  methods: {
    Info(noticeId) {
      getSystemNoticeDetail(noticeId).then(res => {
        this.infos = res.data.data;
      });
    },
  }
}
</script>
<style>
.box {
  width: 1400px;
  margin: 10px auto;
}

.grid-content {
  background-color: white;
  margin-top: 21px;
  width: 1400px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.notice-left-box {
  height: auto;
  margin-left: 30px;
  font-size: 15px;
}

.notice-left-box .span {
  color: #0065B5;
}
.notice-left-box p {
  margin: 10px 0;
}

.btn-tb {
  position: absolute;
  top: 65px;
  left: 118px;
  color: #0065B5;
  z-index: 999;
}
.btn-tb2{
  position: absolute;
  top: 65px;
  left: 118px;
  color: #0065B5;
}
.ql-editor {
  font-size: 15px;
}
.right-box {
  position: relative;
}
#t1,#t2,#t3{
  font-size: 17px
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 120px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 80%;
}
</style>
